<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>滚动样式修改</title>
    <style>
        #container {
            height: 300vh;
            transition: all .1s ease-in;
        }
        #text {
            position: fixed; top: 30px; width: 100vw; text-align: center;
            transition: all .1s ease-in;
        }
    </style>
</head>
<body>
    <div id="container">
        <h2 id="text"></h2>
    </div>
    <script>
        var container = document.getElementById('container')
        var text = document.getElementById('text')
        const configs = [
            {
                innerText: '我就是要变色的文字, 滚动页面看看',
                bg: '#fff',
            },
            {
                style: { color: 'red'},
                innerText: '我现在是红色',
                bg: 'blue',

            },
            {
                style: { color: 'blue' },
                innerText: '我现在是蓝色',
                bg: 'orange',
            },
            {
                style: { color: 'green' },
                innerText: '我现在是绿色, 慌得一批',
                bg: 'red',
            },
            {
                style: { color: 'green' },
                innerText: '我现在是绿色, 黄得一批',
                bg: 'yellow',
            },
        ]
        function loop () {
            const H = document.documentElement.clientHeight / 20
            const scrollTop = document.documentElement.scrollTop
            const index = Math.floor(scrollTop / H) % configs.length
            const config = configs[index]
            config.style && Object.assign(text.style, config.style)
            text.innerText = config.innerText
            container.style.background = config.bg
            requestAnimationFrame(loop)
        }
        loop()
    </script>
</body>
</html>